<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui.dtree帮助手册</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script type="text/javascript" src="../layui/layui.js"></script>

<link rel="stylesheet" href="../layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../layui_ext/dtree/font/dtreefont.css">

<link rel="stylesheet" href="layuiadmin.css">
</head>
<body>

	<div class="container">
		<div class="layui-row layui-col-space10">
			<div class="layui-fluid">
				<div class="div_h3title">
					<i class="dtreefont dtree-icon-fenguangbaobiao"></i>
					<span>dtree 数据树文档 - layui.dtree</span>
				</div>
			</div>
			
			<div class="layui-fluid">
				<blockquote class="layui-elem-quote">提供了集成到layuiadmin-std版本的参考（layuiadmin-pro版本同样适用）</blockquote>
				<blockquote class="layui-elem-quote">模块加载名称：dtree</blockquote>
			</div>
			
			<div class="layui-fluid">
				<ul class="layui-timeline">
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title" id="009">第一步：下载解压最新的dtree压缩包</h3>
							<ul>
								<li>将dtree的压缩包解压后，看到的目录结构应该是这样的：</li>
								<li><img src="img/1.png"/></li>
							</ul>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title" id="008">第二步：将dist/dtree.js  或者  dtree/dtree.js 文件放在layuiadmin的lib/extend目录中</h3>
							<ul>
								<li><img src="img/2.png"/></li>
							</ul>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title" id="007">第三步：修改layuiadmin的config.js文件，将dtree.js添加进配置</h3>
							<ul>
								<li><img src="img/3.png"/></li>
							</ul>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title" id="006">第四步：使用dtree</h3>
							<ul>
								<li>引入依赖layui的css,js，引入dtree依赖的css（css位置可以自定义）（如果需要移动font文件夹，则该文件夹需要整体移动）</li>
								<li>通过上述的步骤，即可直接在layui.use中使用dtree了。</li>
								<li>注意：必须先引入index模块，才能直接使用dtree模块，index模块不能省略。</li>
								<li><img src="img/4.png"/></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="layui-fluid">
				<blockquote class="layui-elem-quote">layuiadmin-pro版本的集成方式同上。</blockquote>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript">
	layui.extend({
		dtree: '{/}../layui_ext/dtree/dtree'												//实际情况下将该路径指定为自己的路径
	}).use(['element','layer', 'table', 'code' ,'util', 'dtree'], function(){
		var element = layui.element,
			layer = layui.layer,
			table = layui.table,
			util = layui.util,
			dtree = layui.dtree,
			$ = layui.$;
		
		layui.code();	// 代码修饰器
		util.fixbar();	// 置顶按钮
		
	});
</script>
</html>